$(function () {
  // 1. 拿到数据  渲染表格 列表
  initArtCateList();
  function initArtCateList() {
    $.ajax({
      method: "get",
      url: "/my/article/cates",
      success: function (res) {
        console.log(res);
        const htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
      },
    });
  }

  let layId;

  // 2. 为添加文章类别 添加点击事件
  $("#add").on("click", function () {
    layId=layui.layer.open({
      // 制定弹出层为没有 按钮的 弹出层
      type: 1,
      // 指定 弹出层的 宽高
      area: ["500px", "250px"],
      title: "添加文章分类",
      content: $("#art-add").html(),
    });
  });

  // 3. 为 添加分类表单 代理 submit 事件
  $("body").on("submit", "#formAdd", function (e) {
    e.preventDefault();
    let dataStr = $(this).serialize();
    $.ajax({
      method: "post",
      url: "/my/article/addcates",
      data: dataStr,
      success(res) {
        if(res.status!==0) return 
        initArtCateList()
        layui.layer.close(layId)
      },
    });
  });

//   4. 为删除按钮 代理 click 事件
  $('tbody').on('click','button.btn-delete',function(){
      // 获取按钮所在 单元格 的id
      const delId=this.parentNode.dataset.id
    // 发送请求 删除 当前分类的 id
      $.ajax({
          method:'get',
          url:'/my/article/deletecate/'+delId,
          success(res){
              // 提示 成功/失败 消息
              layui.layer.msg(res.message)
              // 如果失败 返回
              if(res.status!==0) return
              // 如果成功 重新渲染一下列表
              initArtCateList()
          }
      })
  })

// 为编辑  代理 点击事件
$('tbody').on('click','button.btn-edit',function(){
  layId=layui.layer.open({
    // 制定弹出层为没有 按钮的 弹出层
    type: 1,
    // 指定 弹出层的 宽高
    area: ["500px", "250px"],
    title: "编辑文章分类",
    content: $("#art-edit").html(),
  });


  let cateId=$(this).parent('td').attr('data-id')
  $('#formEdit input[name=Id]').val(cateId)
  // 获取被点击 的 分类的 名称和别名
  // 获取按钮所在的 行
    let $tr=$(this).parents('tr')
    // 获取 行 第一个单元格 的 内容 并设置给 编辑层中  分类名称文本框
    let strName=$tr.children(':first').text()
    // 根据 属性选择器 选出元素  并取到里面的内容
    $('#formEdit input[name=name]').val(strName)
    // 获取 行 第二个 单元格的 内容 并设置给 编辑层中 分类别名文本框
    let strAilas=$tr.children(':eq(1)').text()
    $('#formEdit input[name=alias]').val(strAilas)
})

// 为确认修改表单 添加点击事件
$('body').on('click','.btn-queren',function(e){
  e.preventDefault()
  let strData=$('#formEdit').serialize()
  $.ajax({
    method:'post',
    url:'/my/article/updatecate',
    data:strData,
    success(res){
       // 提示 成功/失败 消息
       layui.layer.msg(res.message)
       // 如果失败 返回
       if(res.status!==0) return
       // 如果成功 重新渲染一下列表
       initArtCateList()
       layui.layer.close(layId )
    }
  })
})














});
